<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城VMALL</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
    <link rel="stylesheet" href="index.css">
    <style>
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 550px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <!-- 顶部菜单栏 -->
    <div class="top">
        <div class="top-content">
            <div class="left-item">
                <div class="top-left-item">首页</div>
                <div class="top-left-item">消费者业务网站</div>
                <div class="top-left-item">V码(优购码)</div>
                <div class="top-left-item">企业商用</div>
                <div class="top-left-item">Select Region</div>
                <div class="top-left-item">
                    更多精彩
                    <img src="./images/down.png" alt="" class="img">
                </div>
            </div>

            <div class="right-item">
                <div class="top-left-item">请登录 注册</div>
                <div class="top-left-item">我的订单</div>
                <div class="top-left-item">
                    客服
                    <img src="./images/down.png" alt="">
                </div>
                <div class="top-left-item">
                    网站导航
                    <img src="./images/down.png" alt="">
                </div>
                <div class="top-left-item">
                    手机版
                    <img src="./images/down.png" alt="">
                </div>
                <div class="top-left-item">
                    <img src="./images/cart.png" alt="">
                    购物车
                </div>
            </div>
        </div>

    </div>
    <!-- 导航栏 -->
    <div class="my-nav">
        <div class="nav-content">
            <div class="logo-box">
                <img src="./images/logo_app.png" alt="">
            </div>
            <div class="nav-box">
                <div class="nav-item">华为</div>
                <div class="nav-item">问界汽车</div>
                <div class="nav-item">华为智选</div>
                <div class="nav-item">生态周边</div>
            </div>
            <div class="search">
                <img src="./images/search.png" alt="">
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="conatiner">
        <!-- 轮播图 -->
        <!-- <div class="swiper">
            <img src="./images/banner01.webp" alt="">
        </div> -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/banner01.webp" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner02.webp" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner03.webp" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner04.webp" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner05.webp" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner06.webp" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner07.webp" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 分类访问 -->
        <div class="sort">
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>智能办公</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>智能家居</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>问界汽车</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>华为手机</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>影音娱乐</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>运动健康</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>企业商用</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>健康</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>超新计划</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>以旧换新</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>众测</p>
            </div>
            <div class="sort-item">
                <img src="./images/pad.webp" alt="">
                <p>教育购</p>
            </div>

        </div>
        <!-- 甄选推荐 -->
        <div class="recommend">
            <div class="recommend-title">
                <div>甄选推荐</div>
                <div>更多</div>
            </div>
            <div class="recommend-content">
                <div class="recommend-item">
                    <img src="./images/car.webp" alt="">
                    <p>问界汽车</p>
                    <p>尊享至高30000元权益（限2023年10月31日前下定用户）如有疑问建议您咨询门店顾问。</p>
                    <p>大智慧 大空间 超安全</p>
                    <p>¥249800</p>
                </div>
                <div class="recommend-item">
                    <img src="./images/car.webp" alt="">
                    <p>问界汽车</p>
                    <p>尊享至高30000元权益（限2023年10月31日前下定用户）如有疑问建议您咨询门店顾问。</p>
                    <p>大智慧 大空间 超安全</p>
                    <p>¥249800</p>
                </div>
                <div class="recommend-item">
                    <img src="./images/car.webp" alt="">
                    <p>问界汽车</p>
                    <p>尊享至高30000元权益（限2023年10月31日前下定用户）如有疑问建议您咨询门店顾问。</p>
                    <p>大智慧 大空间 超安全</p>
                    <p>¥249800</p>
                </div>
                <div class="recommend-item">
                    <img src="./images/car.webp" alt="">
                    <p>问界汽车</p>
                    <p>尊享至高30000元权益（限2023年10月31日前下定用户）如有疑问建议您咨询门店顾问。</p>
                    <p>大智慧 大空间 超安全</p>
                    <p>¥249800</p>
                </div>

            </div>
        </div>
    </div>
    <!-- 页脚信息 -->
    <div class="footer"></div>

    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            // 循环播放
            loop: true,
            // 自动播放
            autoplay: true,
            // 分页
            pagination: {
                el: ".swiper-pagination",
            },
            // 切换效果
            effect: 'slide'
        });
    </script>
</body>

</html>